<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw" style="height: 380px">
    <a-table :columns="columns" :data-source="data">
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import type { TableColumnType } from 'ant-design-vue'
import { ref } from 'vue';

interface ProductInfo{
  key:string
  type:string
  brand:string
  name:string
  price:number
}
const data = ref<ProductInfo[]>([])
const columns:TableColumnType<ProductInfo>[] = [
  {
    title: '分类',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    key: 'brand',
  },
  {
    title: '商品名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
]

setTimeout(()=>{
  data.value = [
  {
    key: '1',
    type: '笔记本',
    brand: '联想',
    name: '拯救者Y9000',
    price: 12.5,
  },
  {
    key: '2',
    type: '笔记本',
    brand: '联想',
    name: '拯救者Y7000',
    price: 22.5,
  },
  {
    key: '3',
    type: '笔记本',
    brand: '苹果',
    name: 'MacbookPro',
    price: 22.5,
  },
  {
    key: '4',
    type: '平板',
    brand: '华为',
    name: 'MatePad 2024',
    price: 22.5,
  },
  {
    key: '5',
    type: '平板',
    brand: '华为',
    name: 'MatePad 2023',
    price: 22.5,
  }
]
},3000)
</script>
